<template>
  <div class="mallOrder">
    <van-card tag='服务包' class="van-card-full" :price="product.price" :desc="product.productDesc" :title="product.name" :thumb="product.icon || 'https://img01.yzcdn.cn/vant/ipad.jpeg'">
      <template #num>
        <van-stepper v-model="ruleForm.num" />
      </template>
    </van-card>
    <div class="mallOrderFormCard">
      <div class="mallOrderFormCardHeader flex-align-center">下单信息</div>
      <div style="border-bottom:1px solid #CCC"></div> 
      <van-cell-group inset class="cell">
        <!-- <van-field v-model="ruleForm.name" label="姓名" placeholder="请输入姓名" label-class="field-label" input-align="right" />
        <van-field v-model="ruleForm.bankNo" label="银行卡号" placeholder="请输入银行卡号" label-class="field-label" input-align="right" />
        <van-field v-model="ruleForm.bankName" label="银行名称" placeholder="请输入银行名称" label-class="field-label" input-align="right" /> -->
        
        <van-field v-model="ruleForm.bankName2" label="签名" label-class="field-label" input-align="right" @click="showSignature">
          <template #input>
            <div class="field-text">签署合同</div>
          </template>
        </van-field>
        
      </van-cell-group>
    </div>
    <div class="media fixed">
      <van-button type="primary" class="mallOrderFormBtn" @click="submitForm">确认购买</van-button>
    </div>
    <van-popup v-model:show="data.showPopup" :style="{ borderRadius: '0.13rem',width: mobileStatus?'100%':'fit-content',height: 'calc(100vh - 100px)' }">
      <div class="hetong" @click="signatureHandler">
        <img class="pdf" lazy-load src="https://66manage.org/file/out.png" />
        <img class="sign" :src="ruleForm.signUrl" v-show="ruleForm.signUrl" :style="{bottom: !mobileStatus ? '26rem' : '16rem'}" />
      </div>
      <!-- <div class="flex-align-center sign-padding">
        <van-button class="signature-btn" size="small" @click="onSubmitHandler">取 消</van-button>
        <van-button type="primary" size="small" class="signature-primary-btn" @click="submitForm">确认购买</van-button>
      </div> -->
    </van-popup>
    <van-popup v-model:show="data.showPopup2" :style="{ borderRadius: '0.13rem',width: mobileStatus?'100%':'fit-content' }">
      <van-signature @submit="onSubmit" @clear="onClear"  v-show="data.mobileStatus" class="signature" />
      <signature @onSave="onSubmit" @clear="onClear" v-show="!data.mobileStatus" />
    </van-popup>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import router from "@/config/router"
import { showToast, showLoadingToast ,showDialog } from 'vant'
import { productBuy } from '@/config/api'
import { onBeforeMount, ref } from 'vue'
// import { Vue3Esign } from 'vue3-esign'
import signature from "./signature.vue"
// 判断是否为移动端
const mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent));
const data = ref({
  showPopup: false,
  showPopup2: false,
  lineWidth: 6,
    lineColor: '#000000',
    bgColor: '',
    resultImg: '',
    isCrop: false,
    mobileStatus
})

const product = ref({})

const ruleForm = ref({
    num: 1
})

onBeforeMount(() => {
  ruleForm.value.num = 1
  ruleForm.value.name = ""
  ruleForm.value.bankNo = ""
  ruleForm.value.bankName = ""
  data.value.showPopup = false
  data.value.showPopup2 = false
  product.value = useRoute().query
})
const signatureHandler = ()=>{
  data.value.showPopup2 = true
}
const showSignature = () => {
  showDialog({
  title: '签署提示',
  message: '请用正楷签字',
}).then(() => {
 ruleForm.value.id = product.value.id
  data.value.showPopup = true
});
}

const onSubmit = (signature) => {
    ruleForm.value.signUrl = signature.image;
    data.value.showPopup2 = false
    data.value.showPopup = false
  // showLoadingToast({
  //   message: '提交中...',
  //   forbidClick: true
  // })
  // productBuy({ ...ruleForm.value, signUrl: data.image }).then(() => {
  //   showToast('下单成功')
  //   // data.value.showPopup = false
  //   goUrl('/');
  // })
}
const submitForm = ()=>{
  const {signUrl } = ruleForm.value

  if (!signUrl) {
    showToast('签署合同不能为空')
    return
  }
  showLoadingToast({
    message: '提交中...',
    forbidClick: true
  })
  productBuy({ ...ruleForm.value }).then(() => {
    showToast('下单成功')
    goUrl('/');
  })
}
const goUrl = (url) => {
  router.push(url)
}
const onClear = () => {
  console.log("showToast('clear')")
}
</script>

<style lang="less">
.van-card{
  padding-top:30px;
  padding-bottom:30px;
}
.van-cell{
  margin-bottom:10px;
}
.van-card__desc{
  font-size:14px;
}
.van-card__title{
  margin-top:8px;
  font-size:18px;
  height:100%;
}
.van-card__price-integer{
  font-size:15px;
}
.van-card__price{
  margin-top:8px;
  font-size:18px;
}
.van-card-full{
  background-color:#fff;
  border-radius:10px;
}
.sign-padding{
  justify-content: flex-end;
  padding: var(--van-signature-padding);
  position: fixed;
  right: 0;
  bottom: 1.33rem;
}
.signature-primary-btn,.signature-btn{
  padding: 0 var(--van-padding-md);
  margin-top: var(--van-padding-xs);
  margin-left: var(--van-padding-xs);
  font-size: 0.32rem;
  color: white;
}
.signature-btn{
  color: #333;
}
.field-label {
  color: #666666;
}
.ml-30 {
  margin-left: 0.4rem;
}
.popup-title {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: none;
  line-height: inherit !important;
  margin-top: 0.4rem;
  &:before {
    content: '';
    background-color: transparent !important;
  }
} 
/deep/ .van-cell {
  padding: var(--van-cell-vertical-padding) 0;
  // &:after{
  //     content:"";
  //     border-bottom: none;
  // }
  .van-cell__title {
    font-size: 0.37rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
}
/deep/ .signature .van-signature__content {
  height: calc(100vh - 6rem) !important;
}
.mallOrder {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 0.25rem;
  /deep/ .van-card {
    background-color: white;
    border-radius: 0.13rem;
  }
  .mallOrderFormCardHeader {
    
    line-height: 1.36rem;
    font-size: 0.4rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    // border-bottom: 0.01rem dashed #f1f1f1;
    &:before {
      content: '';
      background-color: var(--color-primary);
      width: 0.09rem;
      height: 0.4rem;
      border-radius: 0.05rem;
      display: flex;
      margin-right: 0.16rem;
    }
  }
  .mallOrderFormCard {
    border-radius:10px;
    background: #ffffff;
    // border-radius: 0.13rem;
    margin-top: 0.4rem;
    padding: 0 0.4rem 0;
    .cell {
      margin: 0;
    }
  }
}
.mallOrderFormBtn {
  width: 100%;
  height: 1.13rem;
  background: var(--color-primary);
  border-radius: 0.57rem;
  color: white;
//   position: fixed;
//   bottom: 2rem;
//   left: 0;
//   right: 0;
  margin: 0 0.4rem;
}
.fixed{
    position: fixed;
    bottom: 2rem;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.hetong {
  position: relative;
  .pdf{
    width: 100%;
    height: 100%;
  }
  .sign{
    position: absolute;
    right: 4rem;
    bottom: 16rem;
    width: 1.6rem;
    height: 1.6rem;
  }
}
.field-text{
  color: #477CFD;
  font-size: 0.35rem;
  text-decoration: underline;
}
</style>
